<template>
  <div class="echart_box">
    <div class="header">
      <span>{{ titleName }}</span>
      <el-tooltip class="box-item" effect="dark" :content="tip" placement="top">
        <el-icon color="#ccc" size="18px"><InfoFilled /></el-icon>
      </el-tooltip>
    </div>
    <div class="numValue">
      {{ numValue }}
    </div>
    <slot name="picture"></slot>
  </div>
</template>

<script setup name="echartBox">
const props = defineProps({
  titleName: {
    type: String,
    required: true
  },
  tip: {
    type: String,
    required: true
  },
  numValue: {
    type: String,
    required: true
  }
})
</script>

<style scoped lang="scss">
.echart_box {
  height: 100%;
  box-shadow: 0px 0px 6px 0px rgb(220 206 206);
  border-radius: 5px;
  padding: 15px;
  position: relative;
  .header {
    @apply mb-7px text-15px color-#999 flex justify-between;
  }
  .numValue {
    @apply text-30px font-bold pl-5px;
    font-family: '微软雅黑', sans-serif;
  }
}
</style>
